<script setup>
import { onMounted, watch } from "vue";
// import vConsole from 'vconsole';
import { useRouter } from "vue-router";
import initCornerstone3D from "@/cornerstone3D/index.js";
import { initTools } from "./cornerstone3D/initTools";
import { useAppStore } from "./stores/appStore";

const appStore = useAppStore();

const router = useRouter();

const toggleTheme = () => {
	if (appStore.theme === "light") {
		setTheme("dark");
	} else {
		setTheme("light");
	}
};

const setTheme = theme => {
	console.log("setTheme:", theme);
	if (theme === "light" || theme === "dark") {
		appStore.theme = theme;
		document.documentElement.setAttribute("theme-mode", theme);
		localStorage.setItem("theme", theme);
	}
};

watch(() => appStore.theme, setTheme);

onMounted(() => {
	initCornerstone3D();
	initTools();
	// // setTheme(localStorage.getItem("theme") || "light");
	// setTheme("light");
	setTheme("dark");

	const url = window.document.location.href;
	// console.log("app url:", url);
	if (!url.includes("/dicom2d")) {
		router.push({
			name: "dicom2d"
		});
	}
	// router.push({
	// 	name: "dicom2d"
	// 	// query: {
	// 	// 	studyId: "cct"
	// 	// }
	// });
});
</script>

<template>
	<router-view v-slot="{ Component }">
		<keep-alive>
			<component :is="Component" />
		</keep-alive>
	</router-view>
	<!-- <router-view></router-view> -->
</template>

<style scoped></style>
